<template>
  <div class="container">
    <div style="display: flex;align-items: center;margin-top: 5px;margin-left: 10px;">
      <div style="width: 10px;height: 35px;background: #0060bf;">
      </div>
      <div style="margin-left: 10px;font-size: 20px;font-weight: bold;">新增数据总览</div>
      <div style="margin-left: 10px;">更新时间: 2025年3月1日</div>
    </div>
    <div style="display: flex;align-items: center;">
      <div class="border-radius-div"
           style="position:relative;margin: 15px 5px;flex:1;height: 230px;border: 1px solid #ebeef5;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);padding-top: 5px;">
        <div style="margin-left: 10px;font-size: 18px;font-weight: bold;">
          <i class="el-icon-pie-chart"></i>
          <span style="margin-left: 10px;">新增案件数量</span>
        </div>
        <div style="height: 100%;">
          <div id="echarts1_1" style="height: 100%; width:  100%;"></div>
        </div>
        <div style="position: absolute;top:50px;left: 38px;">
          <span style="font-weight: bold;font-size: 22px;">2,942</span>
          <span style="margin-left: 10px;color: #f34f4f;">206</span>
          <img src="@/assets/echart_4_up.png" style="width: 15px;height: 15px;margin-left: 10px;">
        </div>
      </div>
      <div class="border-radius-div"
           style="margin: 15px 5px;flex:1;height: 230px;border: 1px solid #ebeef5;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);padding-top: 5px;">
        <div style="margin-left: 10px;font-size: 18px;font-weight: bold;">
          <i class="el-icon-pie-chart"></i>
          <span style="margin-left: 10px;">新增案件分类型统计</span>
        </div>
        <div style="height: 100%;" class="circle-echarts">
          <div id="echarts1_2" style="height: 100%; width:  100%;"></div>
        </div>
      </div>
      <div class="border-radius-div"
           style="position:relative;margin: 15px 5px;flex:1;height: 230px;border: 1px solid #ebeef5;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);padding-top: 5px;">
        <div style="margin-left: 10px;font-size: 18px;font-weight: bold;">
          <i class="el-icon-pie-chart"></i>
          <span style="margin-left: 10px;">累计监控案件数量</span>
        </div>
        <div style="height: 100%;">
          <div id="echarts1_3" style="height: 100%; width:  100%;"></div>
        </div>
        <div style="position: absolute;top:50px;left: 38px;">
          <span style="font-weight: bold;font-size: 22px;">5,982</span>
          <span style="margin-left: 10px;color: #f34f4f;">1</span>
          <img src="@/assets/echart_4_up.png" style="width: 15px;height: 15px;margin-left: 10px;">
        </div>
      </div>
      <div class="border-radius-div"
           style="margin: 15px 5px;flex:1;height: 230px;border: 1px solid #ebeef5;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);padding-top: 5px;">
        <div style="margin-left: 10px;font-size: 18px;font-weight: bold;">
          <i class="el-icon-pie-chart"></i>
          <span style="margin-left: 10px;">累计监控案件分类型统计</span>
        </div>
        <div style="height: 100%;">
          <div id="echarts1_4" style="height: 100%; width:  100%;"></div>
        </div>
      </div>
    </div>
    <div style="height: calc(100vh - 358px);display: flex;margin: 5px 5px;">
      <div
          style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);height: calc(100vh - 358px);
          flex: 1;display: flex;flex-direction: column;padding: 5px;"
          class="border-radius-div">
        <div style="display: flex;">
          <div style="width: 10px;height: 35px;background: #0060bf;">
          </div>
          <div style="margin-left: 10px;font-size: 20px;font-weight: bold;">新增案件类型逐月统计</div>
        </div>
        <div style="height: 100%;">
          <div id="echarts2_1" style="height: 100%; width:  100%;"></div>
        </div>
      </div>
      <div
          style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);height: calc(100vh - 358px);flex: 1;display: flex;flex-direction: column;padding: 5px;margin-left: 10px;"
          class="border-radius-div">
        <div style="display: flex;">
          <div style="width: 10px;height: 35px;background: #0060bf;">
          </div>
          <div style="margin-left: 10px;font-size: 20px;font-weight: bold;">新增案件类型分庭统计</div>
        </div>
        <div style="height: 100%;">
          <div class="speed-menu-row">
            <div style="display: flex;">
              <el-card class="tag">
                <span style="font-weight: bold;">民事一庭</span>
                <span style="margin-left: 5px;font-weight: bold;color: #5470c6;">50件</span>
              </el-card>
              <el-card class="tag">
                <span style="font-weight: bold;">民事二庭</span>
                <span style="margin-left: 5px;font-weight: bold;color: #5470c6;">31件</span>
              </el-card>
              <el-card class="tag">
                <span style="font-weight: bold;">民事三庭</span>
                <span style="margin-left: 5px;font-weight: bold;color: #5470c6;">39件</span>
              </el-card>
              <el-card class="tag">
                <span style="font-weight: bold;">民事四庭</span>
                <span style="margin-left: 5px;font-weight: bold;color: #5470c6;">47件</span>
              </el-card>
            </div>
            <div style="display: flex;">
              <el-card class="tag">
                <span style="font-weight: bold;">刑事一庭</span>
                <span style="margin-left: 5px;font-weight: bold;color: #91cc75;">19件</span>
              </el-card>
              <el-card class="tag">
                <span style="font-weight: bold;">刑事二庭</span>
                <span style="margin-left: 5px;font-weight: bold;color: #91cc75;">25件</span>
              </el-card>
              <el-card class="tag">
                <span style="font-weight: bold;">刑事三庭</span>
                <span style="margin-left: 5px;font-weight: bold;color: #91cc75;">30件</span>
              </el-card>
              <el-card class="tag">
                <span style="font-weight: bold;">刑事四庭</span>
                <span style="margin-left: 5px;font-weight: bold;color: #91cc75;">41件</span>
              </el-card>
            </div>
            <div style="display: flex;">
              <el-card class="tag">
                <span style="font-weight: bold;">行政一庭</span>
                <span style="margin-left: 5px;font-weight: bold;color: #fac858;">18件</span>
              </el-card>
              <el-card class="tag">
                <span style="font-weight: bold;">行政二庭</span>
                <span style="margin-left: 5px;font-weight: bold;color: #fac858;">9件</span>
              </el-card>
              <el-card class="tag">
                <span style="font-weight: bold;">行政三庭</span>
                <span style="margin-left: 5px;font-weight: bold;color: #fac858;">20件</span>
              </el-card>
              <el-card class="tag">
                <span style="font-weight: bold;">行政四庭</span>
                <span style="margin-left: 5px;font-weight: bold;color: #fac858;">14件</span>
              </el-card>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import user from "@/json/db/user.json";
import api from "@/utils/api";

export default {
  mounted() {
    this.addLog()
    this.initCharts1_1();
    this.initCharts1_2();
    this.initCharts1_3();
    this.initCharts1_4();
    this.initCharts2_1();
  },
  computed: {},
  data() {
    return {}
  },
  methods: {
    addLog() {
      const user = require("@/json/db/user.json")
      const obj = {}
      obj.module = '案件信息统计'
      obj.content = '查看了【新增案件数量统计】'
      obj.userName = user.userName
      api.addLog(obj);
    },
    initCharts1_1() {
      var chartDom = document.getElementById('echarts1_1');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            data: [
              {value: 100, itemStyle: {color: '#3881ff'}},
              {value: 80, itemStyle: {color: '#02b42b'}},
              {value: 200, itemStyle: {color: '#3881ff'}},
              {value: 220, itemStyle: {color: '#02b42b'}},
              {value: 230, itemStyle: {color: '#3881ff'}},
              {value: 240, itemStyle: {color: '#02b42b'}},
              {value: 250, itemStyle: {color: '#3881ff'}},
              {value: 180, itemStyle: {color: '#02b42b'}},
              {value: 220, itemStyle: {color: '#3881ff'}},
              {value: 240, itemStyle: {color: '#02b42b'}},
              {value: 260, itemStyle: {color: '#3881ff'}},
              {value: 250, itemStyle: {color: '#02b42b'}},
              {value: 270, itemStyle: {color: '#3881ff'}},
              {value: 200, itemStyle: {color: '#02b42b'}},
              {value: 230, itemStyle: {color: '#3881ff'}},

            ],
            barWidth: 10,
            type: 'bar',
            axisTick: {
              show: false
            }
          }
        ]
      };
      option && myChart.setOption(option);
    },
    initCharts1_2() {
      var chartDom = document.getElementById('echarts1_2');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'right'
        },
        series: [
          {
            type: 'pie',
            radius: ['32%', '47%'],
            center: ['45%', '45%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 6,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              position: 'outside', // 标签显示在饼图外部
              formatter: '{c}' // 显示格式化的文本和数值
            },
            labelLine: {
              normal: {
                label: {
                  show: true,
                  formatter: '{b} : {c}'
                }
              },
            },
            data: [
              {value: 1048, name: '民事'},
              {value: 735, name: '刑事'},
              {value: 580, name: '行政'}
            ]
          }
        ]
      };
      option && myChart.setOption(option);
    },
    initCharts1_3() {
      var chartDom = document.getElementById('echarts1_3');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        grid: {
          left: '20%',
          top: '5%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          }
        },
        xAxis: {
          axisLine: {
            show: false
          },
          type: 'category',
          data: ['', '', '', '', '', '', '', '', '', '', '']
        },
        yAxis: {
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          },
          type: 'value'
        },

        series: [{
          smooth: true,
          symbol: "circle",
          data: [932, 992, 1190, 1590, 1490, 1510, 1790, 1990, 2110, 2210, 2410],
          type: 'line',
        }]
      };
      option && myChart.setOption(option);
    },
    initCharts1_4() {
      var chartDom = document.getElementById('echarts1_4');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        grid: {
          left: '20%',
          top: '5%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          axisLabel: {
            formatter: '{value} k',
            show: true
          }
        },
        yAxis: {
          axisLabel: {
            textStyle: {
              fontSize: 10 // 设置 x 轴标题字体大小为 20
            }
          },
          type: 'category',
          data: ['行政', '刑事', '民事']
        },
        series: [
          {
            barWidth: 10,
            barGap: '50%',
            type: 'bar',
            data: [
              {
                value: 0.2,
                itemStyle: {color: '#3881ff'}
              },
              {
                value: 0.6,
                itemStyle: {color: '#3881ff'}
              },
              {
                value: 1.2,
                itemStyle: {color: '#3881ff'}
              }
            ]
          }
        ]
      };
      option && myChart.setOption(option);
    },
    initCharts2_1() {
      var chartDom = document.getElementById('echarts2_1');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        grid: {
          top: '20%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['民事', '刑事', '行政']
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '本院案件类型',
            min: 0,
            max: 40,
            interval: 5,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '',
            min: 0,
            max: 30,
            interval: 5,
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '民事',
            type: 'bar',
            yAxisIndex: 0,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: [
              2, 4, 7, 13, 15, 26, 30
            ]
          },
          {
            name: '民事',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              show: false

            },
            data: [
              2, 4, 7, 13, 15, 26, 30
            ]
          },
          {
            name: '刑事',
            type: 'bar',
            yAxisIndex: 0,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: [
              2, 5, 9, 16, 18, 20, 23
            ]
          },
          {
            name: '刑事',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              show: false

            },
            data: [
              2, 5, 9, 16, 18, 20, 23
            ]
          },
          {
            name: '行政',
            type: 'bar',
            yAxisIndex: 0,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              }
            },
            data: [2, 2, 3, 4, 6, 10, 24]
          },
          {
            name: '行政',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              show: false
            },
            data: [2, 2, 3, 4, 6, 10, 24]
          }
        ]
      };
      option && myChart.setOption(option);
    }
  }
};
</script>
<style scoped>
.container {
  width: 100%;
  height: calc(100vh - 50px);
}

.border-radius-div {
  border-radius: 5px;
}

.speed-menu-row {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  align-items: center; /* 垂直居中 */
  padding: 10px; /* 添加一些内边距 */
  overflow: auto;
}

.tag {
  font-size: 18px;
  cursor: pointer;
  margin: 20px 6px; /* 标签之间的外边距 */
  flex: 1; /* 计算每行四个标签的宽度，减去两边的外边距 */
  max-width: 150px;
  white-space: nowrap;
  background-color: #ffffff;
  color: #555555;
  border: 1px solid #d3d2d2;
  text-align: center;
  display: flex;
}


</style>